<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="初诊时间" prop="czrq">
          <el-date-picker
            v-model="queryParams.czrq"
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
            style="width: 250px"
          />
        </el-form-item>
        <el-form-item label="设计时间" prop="sjsj">
          <el-date-picker
            v-model="queryParams.sjsj"
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
            style="width: 250px"
          />
        </el-form-item>
        <el-form-item label="姓名" prop="xm">
          <el-input
            v-model="queryParams.xm"
            placeholder="姓名"
            clearable
            @keyup.enter="handleQuery()"
          />
        </el-form-item>
        <!--                <el-form-item label="手机" prop="tel">-->
        <!--                      <el-input-->
        <!--                          v-model="queryParams.tel"-->
        <!--                          placeholder="手机"-->
        <!--                          clearable-->
        <!--                          @keyup.enter="handleQuery()"-->
        <!--                      />-->
        <!--                </el-form-item>-->
        <!--                <el-form-item label="身份证号" prop="sfz">-->
        <!--                      <el-input-->
        <!--                          v-model="queryParams.sfz"-->
        <!--                          placeholder="身份证号"-->
        <!--                          clearable-->
        <!--                          @keyup.enter="handleQuery()"-->
        <!--                      />-->
        <!--                </el-form-item>-->
        <!--                <el-form-item label="QQ" prop="qq">-->
        <!--                      <el-input-->
        <!--                          v-model="queryParams.qq"-->
        <!--                          placeholder="QQ"-->
        <!--                          clearable-->
        <!--                          @keyup.enter="handleQuery()"-->
        <!--                      />-->
        <!--                </el-form-item>-->
        <!--                <el-form-item label="微信" prop="wx">-->
        <!--                      <el-input-->
        <!--                          v-model="queryParams.wx"-->
        <!--                          placeholder="微信"-->
        <!--                          clearable-->
        <!--                          @keyup.enter="handleQuery()"-->
        <!--                      />-->
        <!--                </el-form-item>-->
        <el-form-item label="所属形象设计师" prop="sjs">
          <el-input
            v-model="queryParams.sjs"
            placeholder="所属形象设计师"
            clearable
            @keyup.enter="handleQuery()"
          />
        </el-form-item>
        <el-form-item label="设计科室" prop="sjks">
          <el-input
            v-model="queryParams.sjks"
            placeholder="设计科室"
            clearable
            @keyup.enter="handleQuery()"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <template #icon>
              <Search />
            </template>
            搜索
          </el-button>
          <el-button @click="handleResetQuery">
            <template #icon>
              <Refresh />
            </template>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <div class="mb-10px">
        <el-button v-hasPerm="['system:wxKf:add']" type="success" @click="handleOpenDialog()">
          <template #icon>
            <Plus />
          </template>
          新增
        </el-button>
        <el-button
          v-hasPerm="['system:wxKf:delete']"
          type="danger"
          :disabled="removeIds.length === 0"
          @click="handleDelete()"
        >
          <template #icon>
            <Delete />
          </template>
          删除
        </el-button>
      </div>

      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="pageData"
        highlight-current-row
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column type="index" label="序号" width="80" align="center" />
        <!--                    <el-table-column-->
        <!--                        key="id"-->
        <!--                        label="主键"-->
        <!--                        prop="id"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="dj"-->
        <!--                        label="定金"-->
        <!--                        prop="dj"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="zp"-->
        <!--                        label="客户照片"-->
        <!--                        prop="zp"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <el-table-column
          key="kh"
          label="客户卡号"
          prop="kh"
          min-width="150"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          key="kfjg"
          label="客户所属机构"
          prop="kfjg"
          min-width="200"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          key="xm"
          label="姓名"
          prop="xm"
          min-width="150"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          key="xb"
          label="性别"
          prop="xb"
          min-width="150"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          key="tel"
          label="手机"
          prop="tel"
          min-width="150"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          key="tel1"
          label="联系电话"
          prop="tel1"
          min-width="150"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          key="sr"
          label="生日"
          prop="sr"
          min-width="150"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          key="nl"
          label="年龄"
          prop="nl"
          min-width="100"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          key="csrq"
          label="出生日期"
          prop="csrq"
          min-width="150"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          key="kfzt"
          label="客户状态"
          prop="kfzt"
          min-width="150"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          key="zy"
          label="职业"
          prop="zy"
          min-width="150"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          key="czrq"
          label="初诊时间"
          prop="czrq"
          min-width="200"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          key="bah"
          label="病案号"
          prop="bah"
          min-width="150"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          key="sfz"
          label="身份证号"
          prop="sfz"
          min-width="200"
          align="center"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          key="xzz"
          label="现住址"
          prop="xzz"
          min-width="200"
          align="center"
          :show-overflow-tooltip="true"
        />
        <!--                    <el-table-column-->
        <!--                        key="khly"-->
        <!--                        label="客户来源区域"-->
        <!--                        prop="khly"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="hffs"-->
        <!--                        label="期望回访方式"-->
        <!--                        prop="hffs"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="jshf"-->
        <!--                        label="接受回访"-->
        <!--                        prop="jshf"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="jsdx"-->
        <!--                        label="接受短信"-->
        <!--                        prop="jsdx"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="srqk"-->
        <!--                        label="收入情况"-->
        <!--                        prop="srqk"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="qq"-->
        <!--                        label="QQ"-->
        <!--                        prop="qq"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="wx"-->
        <!--                        label="微信"-->
        <!--                        prop="wx"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="kfqd"-->
        <!--                        label="开发渠道"-->
        <!--                        prop="kfqd"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="ljtj"-->
        <!--                        label="了解途径"-->
        <!--                        prop="ljtj"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="khxh"-->
        <!--                        label="客户爱好"-->
        <!--                        prop="khxh"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="kefury"-->
        <!--                        label="开发人员"-->
        <!--                        prop="kefury"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="sjs"-->
        <!--                        label="所属形象设计师"-->
        <!--                        prop="sjs"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="kfry"-->
        <!--                        label="客服人员"-->
        <!--                        prop="kfry"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="jsr"-->
        <!--                        label="介绍人"-->
        <!--                        prop="jsr"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="bz"-->
        <!--                        label="备注"-->
        <!--                        prop="bz"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="lxrxx"-->
        <!--                        label="联系人信息"-->
        <!--                        prop="lxrxx"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="gms"-->
        <!--                        label="过敏史"-->
        <!--                        prop="gms"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="mzh"-->
        <!--                        label="门诊号"-->
        <!--                        prop="mzh"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="jzlx"-->
        <!--                        label="就诊类型"-->
        <!--                        prop="jzlx"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="sjsj"-->
        <!--                        label="设计时间"-->
        <!--                        prop="sjsj"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="sjks"-->
        <!--                        label="设计科室"-->
        <!--                        prop="sjks"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="xxsjs"-->
        <!--                        label="形象设计师"-->
        <!--                        prop="xxsjs"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="gxwt"-->
        <!--                        label="客户关心问题"-->
        <!--                        prop="gxwt"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="kfyx1"-->
        <!--                        label="客户意向1"-->
        <!--                        prop="kfyx1"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="kfyx2"-->
        <!--                        label="客户意向2"-->
        <!--                        prop="kfyx2"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="kfyx3"-->
        <!--                        label="客户意向3"-->
        <!--                        prop="kfyx3"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="jzys"-->
        <!--                        label="就诊医生"-->
        <!--                        prop="jzys"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="zzys"-->
        <!--                        label="助诊医生"-->
        <!--                        prop="zzys"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="wcjyy"-->
        <!--                        label="未成交原因"-->
        <!--                        prop="wcjyy"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <!--                    <el-table-column-->
        <!--                        key="sjbz"-->
        <!--                        label="设计备注"-->
        <!--                        prop="sjbz"-->
        <!--                        min-width="150"-->
        <!--                        align="center"-->
        <!--                    />-->
        <el-table-column fixed="right" label="操作" align="center" width="150">
          <template #default="scope">
            <el-button
              v-hasPerm="['system:wxKf:record']"
              type="primary"
              size="small"
              link
              @click="handleOpenRecordsDialog(scope.row.id)"
            >
              <template #icon>
                <Document />
              </template>
              护理记录
            </el-button>
            <el-button type="primary" size="small" link @click="handleViewDialog(scope.row.id)">
              <template #icon>
                <View />
              </template>
              查看
            </el-button>
            <el-button
              v-hasPerm="['system:wxKf:edit']"
              type="primary"
              size="small"
              link
              @click="handleOpenDialog(scope.row.id)"
            >
              <template #icon>
                <Edit />
              </template>
              编辑
            </el-button>
            <el-button
              v-hasPerm="['system:wxKf:delete']"
              type="danger"
              size="small"
              link
              @click="handleDelete(scope.row.id)"
            >
              <template #icon>
                <Delete />
              </template>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery()"
      />
    </el-card>

    <!-- 客户档案表单弹窗 -->

    <!-- 客户档案表单弹窗 -->
    <el-drawer
      v-model="dialog.visible"
      :title="dialog.title"
      append-to-body
      size="50%"
      class="custom-title-drawer"
      :close-on-click-modal="false"
      @close="handleCloseDialog"
    >
      <el-tabs v-model="activeTab" class="left-centered-tabs">
        <!-- 当前设计 Tab -->
        <el-tab-pane label="当前设计" name="design">
          <el-form ref="designFormRef" :model="formData" :rules="designRules" label-width="120px">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="客户卡号：">
                  {{ formData.kh }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="姓名：">
                  {{ formData.xm }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="性别：">
                  {{ formData.xb }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目剩余：">
                  {{ formData.dj }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第一行：门诊号、就诊类型 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="门诊号" prop="mzh">
                  <el-input v-model="formData.mzh" placeholder="门诊号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="就诊类型" prop="jzlx">
                  <el-input v-model="formData.jzlx" placeholder="就诊类型" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第二行：设计时间、设计科室 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="设计时间" prop="sjsj">
                  <el-date-picker
                    v-model="formData.sjsj"
                    type="datetime"
                    placeholder="选择设计时间"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设计科室" prop="sjks">
                  <el-input v-model="formData.sjks" placeholder="设计科室" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第三行：形象设计师、客户关心问题 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="形象设计师" prop="xxsjs">
                  <el-input v-model="formData.xxsjs" placeholder="形象设计师" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客户关心问题" prop="gxwt">
                  <el-input v-model="formData.gxwt" placeholder="客户关心问题" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第四行：客户意向1、客户意向2 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="客户意向1" prop="kfyx1">
                  <el-input v-model="formData.kfyx1" placeholder="客户意向1" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客户意向2" prop="kfyx2">
                  <el-input v-model="formData.kfyx2" placeholder="客户意向2" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第五行：客户意向3、就诊医生 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="客户意向3" prop="kfyx3">
                  <el-input v-model="formData.kfyx3" placeholder="客户意向3" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="就诊医生" prop="jzys">
                  <el-input v-model="formData.jzys" placeholder="就诊医生" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第六行：助诊医生 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="助诊医生" prop="zzys">
                  <el-input v-model="formData.zzys" placeholder="助诊医生" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="未成交原因" prop="wcjyy">
                  <el-input v-model="formData.wcjyy" placeholder="未成交原因" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="24">
                <div class="design-remark">
                  <div class="remark-tabs">
                    <span
                      class="tab-item"
                      :class="{ active: activeBasicTab1 === 'fymx' }"
                      @click="activeBasicTab1 = 'fymx'"
                    >
                      费用明细
                    </span>
                    <span class="tab-item" :class="{ active: activeBasicTab1 === 'djll' }">
                      <!--                      @click="activeBasicTab1 = 'djll'"-->
                      单据浏览
                    </span>
                    <span
                      class="tab-item"
                      :class="{ active: activeBasicTab1 === 'sjbz' }"
                      @click="activeBasicTab1 = 'sjbz'"
                    >
                      设计备注
                    </span>
                  </div>
                  <div class="remark-content">
                    <!-- 费用明细 -->
                    <el-input
                      v-show="activeBasicTab1 === 'fymx'"
                      v-model="formData.fymx"
                      type="textarea"
                      :rows="25"
                      placeholder="请输入费用明细"
                      class="red-text"
                    />

                    <!-- 单据浏览 -->
                    <el-input
                      v-show="activeBasicTab1 === 'djll'"
                      v-model="formData.djll"
                      type="textarea"
                      :rows="25"
                      placeholder="请输入单据浏览"
                      class="red-text"
                    />

                    <!-- 设计备注 -->
                    <el-input
                      v-show="activeBasicTab1 === 'sjbz'"
                      v-model="formData.sjbz"
                      type="textarea"
                      :rows="25"
                      placeholder="请输入设计备注"
                      class="red-text"
                    />
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <!-- 客户基本资料 Tab -->

        <el-tab-pane label="客户基本资料" name="basic">
          <el-form ref="basicFormRef" :model="formData" :rules="basicRules" label-width="120px">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="客户卡号：">
                  {{ formData.kh }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="姓名：">
                  {{ formData.xm }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="性别：" prop="xb">
                  {{ formData.xb }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目剩余" prop="dj">
                  <el-input v-model="formData.dj" placeholder="项目剩余" />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第一行：客户卡号、客户所属机构 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="客户卡号" prop="kh">
                  <el-input v-model="formData.kh" placeholder="客户卡号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客户所属机构" prop="kfjg">
                  <el-input v-model="formData.kfjg" placeholder="客户所属机构" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第二行：姓名、性别 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="姓名" prop="xm">
                  <el-input v-model="formData.xm" placeholder="姓名" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别" prop="xb">
                  <el-input v-model="formData.xb" placeholder="性别" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第三行：手机、联系电话 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="手机" prop="tel">
                  <el-input v-model="formData.tel" placeholder="手机" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="tel1">
                  <el-input v-model="formData.tel1" placeholder="联系电话" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第四行：生日、年龄 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="生日" prop="sr">
                  <el-input v-model="formData.sr" placeholder="生日" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="年龄" prop="nl">
                  <el-input v-model="formData.nl" placeholder="年龄" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第五行：出生日期、客户状态 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="出生日期" prop="csrq">
                  <el-input v-model="formData.csrq" placeholder="出生日期" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客户状态" prop="kfzt">
                  <el-input v-model="formData.kfzt" placeholder="客户状态" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第六行：职业、初诊时间 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="职业" prop="zy">
                  <el-input v-model="formData.zy" placeholder="职业" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="初诊时间" prop="czrq">
                  <el-date-picker
                    v-model="formData.czrq"
                    type="datetime"
                    placeholder="选择初诊时间"
                    value-format="YYYY-MM-DD HH:mm:ss"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第七行：病案号、身份证号 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="病案号" prop="bah">
                  <el-input v-model="formData.bah" placeholder="病案号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身份证号" prop="sfz">
                  <el-input v-model="formData.sfz" placeholder="身份证号" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第八行：现住址 -->
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="现住址" prop="xzz">
                  <el-input v-model="formData.xzz" placeholder="现住址" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 附加信息标题 -->
            <el-row :gutter="24">
              <el-col :span="24">
                <div class="additional-info-title">
                  <span>附加信息</span>
                </div>
              </el-col>
            </el-row>

            <!-- 第九行：客户来源区域、期望回访方式 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="客户来源区域" prop="khly">
                  <el-input v-model="formData.khly" placeholder="客户来源区域" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="期望回访方式" prop="hffs">
                  <el-input v-model="formData.hffs" placeholder="期望回访方式" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第十行：接受回访、接受短信 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="接受回访" prop="jshf">
                  <el-input v-model="formData.jshf" placeholder="接受回访" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="接受短信" prop="jsdx">
                  <el-input v-model="formData.jsdx" placeholder="接受短信" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第十一行：收入情况、QQ -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="收入情况" prop="srqk">
                  <el-input v-model="formData.srqk" placeholder="收入情况" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="QQ" prop="qq">
                  <el-input v-model="formData.qq" placeholder="QQ" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第十二行：微信、开发渠道 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="微信" prop="wx">
                  <el-input v-model="formData.wx" placeholder="微信" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开发渠道" prop="kfqd">
                  <el-input v-model="formData.kfqd" placeholder="开发渠道" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第十三行：了解途径、客户爱好 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="了解途径" prop="ljtj">
                  <el-input v-model="formData.ljtj" placeholder="了解途径" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客户爱好" prop="khxh">
                  <el-input v-model="formData.khxh" placeholder="客户爱好" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第十四行：开发人员、所属形象设计师 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="开发人员" prop="kefury">
                  <el-input v-model="formData.kefury" placeholder="开发人员" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属形象设计师" prop="sjs">
                  <el-input v-model="formData.sjs" placeholder="所属形象设计师" />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第十五行：客服人员、介绍人 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="客服人员" prop="kfry">
                  <el-input v-model="formData.kfry" placeholder="客服人员" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="介绍人" prop="jsr">
                  <el-input v-model="formData.jsr" placeholder="介绍人" />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 备注、联系人信息、过敏史区域 -->
            <el-row :gutter="24">
              <el-col :span="24">
                <div class="design-remark">
                  <div class="remark-tabs">
                    <span
                      class="tab-item"
                      :class="{ active: activeBasicTab === 'bz' }"
                      @click="activeBasicTab = 'bz'"
                    >
                      备注
                    </span>
                    <span
                      class="tab-item"
                      :class="{ active: activeBasicTab === 'lxrxx' }"
                      @click="activeBasicTab = 'lxrxx'"
                    >
                      联系人信息
                    </span>
                    <span
                      class="tab-item"
                      :class="{ active: activeBasicTab === 'gms' }"
                      @click="activeBasicTab = 'gms'"
                    >
                      过敏史
                    </span>
                  </div>
                  <div class="remark-content">
                    <!-- 备注内容 -->
                    <el-input
                      v-show="activeBasicTab === 'bz'"
                      v-model="formData.bz"
                      type="textarea"
                      :rows="25"
                      placeholder="请输入备注"
                      class="red-text"
                    />

                    <!-- 联系人信息内容 -->
                    <el-input
                      v-show="activeBasicTab === 'lxrxx'"
                      v-model="formData.lxrxx"
                      type="textarea"
                      :rows="25"
                      placeholder="请输入联系人信息"
                      class="red-text"
                    />

                    <!-- 过敏史内容 -->
                    <el-input
                      v-show="activeBasicTab === 'gms'"
                      v-model="formData.gms"
                      type="textarea"
                      :rows="25"
                      placeholder="请输入过敏史"
                      class="red-text"
                    />
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" :disabled="loading" @click="handleSubmit()">确定</el-button>
          <el-button @click="handleCloseDialog()">取消</el-button>
        </div>
      </template>
    </el-drawer>

    <!-- 客户档案表单弹窗 -->
    <el-drawer
      v-model="dialog1.visible"
      :title="dialog1.title"
      append-to-body
      size="50%"
      class="custom-title-drawer"
      :close-on-click-modal="false"
      @close="handleCloseViewDialog"
    >
      <el-tabs v-model="activeTab" class="left-centered-tabs">
        <!-- 当前设计 Tab -->
        <el-tab-pane label="当前设计" name="design">
          <el-form ref="designFormRef1" :model="formData" label-width="120px">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="客户卡号：">
                  {{ formData.kh }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="姓名：">
                  {{ formData.xm }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="性别：">
                  {{ formData.xb }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目剩余：">
                  {{ formData.dj }}
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第一行：门诊号、就诊类型 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="门诊号：">
                  {{ formData.mzh }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="就诊类型：">
                  {{ formData.jzlx }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第二行：设计时间、设计科室 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="设计时间：">
                  {{ formData.sjsj }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设计科室：">
                  {{ formData.sjks }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第三行：形象设计师、客户关心问题 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="形象设计师：">
                  {{ formData.xxsjs }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客户关心问题：">
                  {{ formData.gxwt }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第四行：客户意向1、客户意向2 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="客户意向1：">
                  {{ formData.kfyx1 }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客户意向2：">
                  {{ formData.kfyx2 }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第五行：客户意向3、就诊医生 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="客户意向3：">
                  {{ formData.kfyx3 }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="就诊医生：">
                  {{ formData.jzys }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第六行：助诊医生、未成交原因 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="助诊医生：">
                  {{ formData.zzys }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="未成交原因：">
                  {{ formData.wcjyy }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 费用明细 -->
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="费用明细：">
                  {{ formData.fymx }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 单据浏览 -->
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="单据浏览：">
                  {{ formData.djll }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 设计备注 -->
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="设计备注：">
                  {{ formData.sjbz }}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <!-- 客户基本资料 Tab -->

        <el-tab-pane label="客户基本资料" name="basic">
          <el-form ref="basicFormRef1" :model="formData" label-width="125px">
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="姓名：">
                  {{ formData.xm }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="性别：" prop="xb">
                  {{ formData.xb }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目剩余：">
                  {{ formData.dj }}
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第一行：客户卡号、客户所属机构 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="客户卡号：" prop="kh">
                  {{ formData.kh }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客户所属机构：" prop="kfjg">
                  {{ formData.kfjg }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第二行：姓名、性别 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="姓名：" prop="xm">
                  {{ formData.xm }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别：" prop="xb">
                  {{ formData.xb }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第三行：手机、联系电话 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="手机：" prop="tel">
                  {{ formData.tel }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话：" prop="tel1">
                  {{ formData.tel1 }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第四行：生日、年龄 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="生日：" prop="sr">
                  {{ formData.sr }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="年龄：" prop="nl">
                  {{ formData.nl }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第五行：出生日期、客户状态 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="出生日期：" prop="csrq">
                  {{ formData.csrq }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客户状态：" prop="kfzt">
                  {{ formData.kfzt }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第六行：职业、初诊时间 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="职业：" prop="zy">
                  {{ formData.zy }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="初诊时间：" prop="czrq">
                  {{ formData.czrq }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第七行：病案号、身份证号 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="病案号：" prop="bah">
                  {{ formData.bah }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身份证号：" prop="sfz">
                  {{ formData.sfz }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第八行：现住址 -->
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="现住址：" prop="xzz">
                  {{ formData.xzz }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 附加信息标题 -->
            <el-row :gutter="24">
              <el-col :span="24">
                <div class="additional-info-title">
                  <span>附加信息</span>
                </div>
              </el-col>
            </el-row>

            <!-- 第九行：客户来源区域、期望回访方式 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="客户来源区域：" prop="khly">
                  {{ formData.khly }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="期望回访方式：" prop="hffs">
                  {{ formData.hffs }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第十行：接受回访、接受短信 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="接受回访：" prop="jshf">
                  {{ formData.jshf }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="接受短信：" prop="jsdx">
                  {{ formData.jsdx }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第十一行：收入情况、QQ -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="收入情况：" prop="srqk">
                  {{ formData.srqk }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="QQ：" prop="qq">
                  {{ formData.qq }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第十二行：微信、开发渠道 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="微信：" prop="wx">
                  {{ formData.wx }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开发渠道：" prop="kfqd">
                  {{ formData.kfqd }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第十三行：了解途径、客户爱好 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="了解途径：" prop="ljtj">
                  {{ formData.ljtj }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="客户爱好：" prop="khxh">
                  {{ formData.khxh }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第十四行：开发人员、所属形象设计师 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="开发人员：" prop="kefury">
                  {{ formData.kefury }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属形象设计师：" prop="sjs">
                  {{ formData.sjs }}
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第十五行：客服人员、介绍人 -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="客服人员：" prop="kfry">
                  {{ formData.kfry }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="介绍人：" prop="jsr">
                  {{ formData.jsr }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="备注：" prop="bz">
                  {{ formData.bz }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="联系人信息：" prop="lxrxx">
                  {{ formData.lxrxx }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="过敏史：" prop="gms">
                  {{ formData.gms }}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCloseViewDialog()">关 闭</el-button>
        </div>
      </template>
    </el-drawer>
    <Records ref="recordsRef" />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "WxKf",
  inheritAttrs: false,
});
const designFormRef = ref(ElForm); // 当前设计表单引用
const designFormRef1 = ref(ElForm); // 当前设计表单引用
const basicFormRef = ref(ElForm); // 客户基本资料表单引用
const basicFormRef1 = ref(ElForm); // 客户基本资料表单引用
// 添加活动标签页响应式变量
const activeTab = ref("design"); // 默认显示当前设计标签页
import WxKfAPI, { WxKfPageVO, WxKfForm, WxKfPageQuery } from "@/api/system/wx-kf";
import Records from "./records.vue";
// 添加到现有的响应式变量声明区域
const isViewMode = ref(false);
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const recordsRef = ref(Records);

const loading = ref(false);
const removeIds = ref<number[]>([]);
const total = ref(0);

const queryParams = reactive<WxKfPageQuery>({
  pageNum: 1,
  pageSize: 10,
});

// 客户档案表格数据
const pageData = ref<WxKfPageVO[]>([]);
// 添加到现有的响应式变量声明区域
const activeBasicTab = ref("bz"); // 默认显示备注标签
const activeBasicTab1 = ref("fymx"); // 默认显示备注标签
// 弹窗
const dialog = reactive({
  title: "",
  visible: false,
});

const dialog1 = reactive({
  title: "",
  visible: false,
});

// 客户档案表单数据
const formData = reactive<WxKfForm>({
  kfjg: "绣颜美业美容会馆",
});

// 当前设计表单校验规则
const designRules = reactive({
  // mzh: [{ required: true, message: "请输入门诊号", trigger: "blur" }],
  jzlx: [{ required: true, message: "请输入就诊类型", trigger: "blur" }],
  // sjsj: [{ required: true, message: "请输入设计时间", trigger: "blur" }],
  // sjks: [{ required: true, message: "请输入设计科室", trigger: "blur" }],
  xxsjs: [{ required: true, message: "请输入形象设计师", trigger: "blur" }],
  // gxwt: [{ required: true, message: "请输入客户关心问题", trigger: "blur" }],
  // kfyx1: [{ required: true, message: "请输入客户意向1", trigger: "blur" }],
  // jzys: [{ required: true, message: "请输入就诊医生", trigger: "blur" }],
});

// 客户基本资料表单校验规则
const basicRules = reactive({
  xm: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  tel: [{ required: true, message: "请输入手机", trigger: "blur" }],
  czrq: [{ required: true, message: "请输入初诊时间", trigger: "blur" }],
  sjs: [{ required: true, message: "请输入所属形象设计师", trigger: "blur" }],
  // 可以根据需要添加其他必填字段的校验规则
});

/** 查询客户档案 */
function handleQuery() {
  loading.value = true;
  WxKfAPI.getPage(queryParams)
    .then((data) => {
      pageData.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/** 重置客户档案查询 */
function handleResetQuery() {
  queryFormRef.value!.resetFields();
  queryParams.pageNum = 1;
  handleQuery();
}

/** 行复选框选中记录选中ID集合 */
function handleSelectionChange(selection: any) {
  removeIds.value = selection.map((item: any) => item.id);
}

// 添加查看对话框的方法
function handleViewDialog(id: number) {
  isViewMode.value = true;
  handleOpenViewDialog(id);
}

/** 打开客户档案弹窗 */
function handleOpenViewDialog(id?: number) {
  dialog1.visible = true;
  if (id) {
    dialog1.title = "客户档案";
    WxKfAPI.getFormData(id).then((data) => {
      Object.assign(formData, data);
    });
  }
}

/** 关闭客户档案弹窗 */
function handleCloseViewDialog() {
  dialog1.visible = false;
  designFormRef1.value.resetFields();
  designFormRef1.value.clearValidate();

  basicFormRef1.value.clearValidate();
  basicFormRef1.value.resetFields();
  formData.id = undefined;
}

/** 打开客户档案弹窗 */
function handleOpenDialog(id?: number) {
  dialog.visible = true;
  if (id) {
    dialog.title = "编辑客户档案";
    WxKfAPI.getFormData(id).then((data) => {
      Object.assign(formData, data);
    });
  } else {
    dialog.title = "新增客户档案";
    // 完全重置表单数据，只保留默认值
    Object.keys(formData).forEach((key) => {
      delete formData[key as keyof WxKfForm];
    });
    // 设置默认值
    formData.kfjg = "绣颜美业美容会馆";
  }
}

/** 打开客户档案弹窗 */
function handleOpenRecordsDialog(id?: number) {
  recordsRef.value.openDialog(id);
}

/** 提交表单 */
function handleSubmit() {
  // 根据当前活动的标签页决定校验哪个表单
  if (activeTab.value === "design") {
    console.log("提交当前设计表单");
    // 校验当前设计表单
    designFormRef.value.validate((valid: boolean) => {
      if (valid) {
        submitFormData();
      }
    });
  } else {
    console.log("提交客户基本资料表单");
    // 校验客户基本资料表单
    basicFormRef.value.validate((valid: boolean) => {
      if (valid) {
        submitFormData();
      }
    });
  }
}

/** 提交表单数据 */
function submitFormData() {
  loading.value = true;
  const id = formData.id;
  if (id) {
    WxKfAPI.update(id, formData)
      .then(() => {
        ElMessage.success("编辑成功");
        handleCloseDialog();
        handleResetQuery();
      })
      .finally(() => (loading.value = false));
  } else {
    WxKfAPI.add(formData)
      .then(() => {
        ElMessage.success("新增成功");
        handleCloseDialog();
        handleResetQuery();
      })
      .finally(() => (loading.value = false));
  }
}

/** 关闭客户档案弹窗 */
function handleCloseDialog() {
  dialog.visible = false;
  designFormRef.value.resetFields();
  designFormRef.value.clearValidate();

  basicFormRef.value.clearValidate();
  basicFormRef.value.resetFields();
  formData.id = undefined;
}

/** 删除客户档案 */
function handleDelete(id?: number) {
  const ids = [id || removeIds.value].join(",");
  if (!ids) {
    ElMessage.warning("请勾选删除项");
    return;
  }

  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(
    () => {
      loading.value = true;
      WxKfAPI.deleteByIds(ids)
        .then(() => {
          ElMessage.success("删除成功");
          handleResetQuery();
        })
        .finally(() => (loading.value = false));
    },
    () => {
      ElMessage.info("已取消删除");
    }
  );
}

onMounted(() => {
  handleQuery();
});
</script>

<style scoped>
:deep(.el-input-number .el-input__inner) {
  text-align: left !important;
}

:deep(.el-popper) {
  max-width: 500px;
}
</style>

<style scoped>
.red-text :deep(.el-textarea__inner) {
  color: #2c58e7;
  font-weight: bold;
}

.design-remark {
  margin-top: 20px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.remark-tabs {
  display: flex;
  border-bottom: 1px solid #dcdfe6;
  background-color: #f5f7fa;
}

.tab-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #606266;
}

.tab-item.active {
  color: #e6a23c;
  font-weight: bold;
  border-bottom: 2px solid #e6a23c;
}

.remark-content {
  padding-top: 0px;
}

.el-textarea__inner {
}
</style>

<style scoped>
.additional-info-title {
  padding: 10px 0;
  border-bottom: 1px solid #dcdfe6;
  margin-bottom: 10px;
  font-weight: bold;
  color: #303133;
  font-size: 14px;
}

/* 确保标题与下方内容有适当的间距 */
.el-form-item {
  margin-bottom: 15px;
}
</style>

<style scoped>
/* 使用 :global 来穿透作用域 */
:global(.custom-title-drawer .el-drawer__header) {
  margin-bottom: -15px;
}

:global(.custom-title-drawer .el-drawer__header span) {
  font-size: 25px !important;
  font-weight: bold !important;
}
</style>
